<template>
    <el-menu
        class="onsite-menu"
        mode="horizontal"
        active-text-color="#ffd04b"
        :default-active="current"
    >
        <el-menu-item 
            v-for="(item,index) in components"
            :index="'' + index"
            @click="selectComponent"
        >
            <i :class="'iconfont icon-' + item.icon"></i>
            &nbsp;
            {{ item.name }}
        </el-menu-item>
    </el-menu>
</template>

<script lang="ts">
export default {
    data() {
        return {
            components: [],
            current: '-1'
        }
    },
    mounted() {
        this.getComponents()
    },
    emits: ["change"],
    methods: {
        /**
         * 获取所有组件
         */
        getComponents() {
            this.$get("components/getAll")
                .then((res) => {
                    this.components = res
                    this.selectComponent({
                        index: '0'
                    })
                })
        },
        /**
         * 选择组件
         */
        selectComponent(res) {
            if(res.index == this.current) return false
            this.current = res.index
            const currentComponent = this.components[res.index]
            this.$emit("change",currentComponent.childrens ? currentComponent.childrens : [currentComponent])
        }
    }
}
</script>



<style>
    .el-popper{
        --el-menu-text-color:var(--second-text-color);
    }
</style>

<style scoped lang="scss">
    .onsite-menu{
        --el-bg-color-overlay:#c1efde;
        background-color:transparent;
    }
</style>